<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="resources/jquery/jquery-1.7.2.min.js"></script>
<title>Insert title here</title>
	<style>
			* {margin: 0; 
				padding: 0;}
			.glass {
				width: 200px;
				margin: 100px auto; 
				position: relative;}	
			.large {
				width: 175px; height: 175px;
				background: url('resources/img/jung3.jpg') no-repeat;
				border-radius: 100%;
				box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.85), 
				0 0 10px 10px rgba(0, 0, 0, 0.25), 
				inset 0 0 40px 5px rgba(0, 0, 0, 0.25);	
				position: absolute;
				display: none;}		
			.small { display: block; }				
		</style>
	</head>
<body>	
<div class="glass">			
			<div class="large"></div>			
			<img class="small" src="resources/img/jung3.jpg" width="200"/>			
		</div>

		<script type="text/javascript">
			$(function(){

				var original_width = 0;
				var original_height = 0;

				$(".glass").mousemove(function(e){
					if(!original_width && !original_height)
					{
						var image_object = new Image();
						image_object.src = $(".small").attr("src");
						original_width = image_object.width;			
						original_height = image_object.height;			
					}
					else
					{
						var glass_offset = $(this).offset();
						var mx = e.pageX - glass_offset.left;
						var my = e.pageY - glass_offset.top;		

						if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
						{
							$(".large").fadeIn(100);
						}
						else
						{
							$(".large").fadeOut(100);
						}				
						
						if($(".large").is(":visible"))
						{
							var px = mx - $(".large").width()/2;
							var py = my - $(".large").height()/2;


							var rx = Math.round(mx/$(".small").width()*original_width - $(".large").width()/2)*-1;
							var ry = Math.round(my/$(".small").height()*original_height - $(".large").height()/2)*-1;
							var bgp = rx + "px " + ry + "px";


							$(".large").css({left: px, top: py, backgroundPosition: bgp});
						}
					}
				})












			});
		</script>
</body>
</html>